<template>
  <div class="index">
    <!-- 搜索框 -->
    <van-nav-bar class="index-navbar">
      <van-button plain type="info" slot="title" icon="search">搜索</van-button>
    </van-nav-bar>

    <!-- 推荐频道 -->
    <van-tabs v-model="active">
      <!-- 频道的每一个标签 -->
      <van-tab v-for="(item, index) in userChannels" :key="index" :title="item.name" />

      <!-- 数据列表 -->
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
        <!-- 上拉加载更多 -->
        <van-list
          v-model="vanList.loading"
          :offset="vanList.offset"
          :finished="vanList.finished"
          :finished-text="vanList.finishedText"
          :loading-text="vanList.loadingText"
          @load="getArticles"
        >
          <van-cell
            :url="'/content/' + item.art_id"
            v-for="item in articles[channelId]"
            :key="item.id"
            :title="item.title"
          >
            <!-- 默认插槽：右边默认插槽中放一张图片 -->
            <van-image
              v-if="item.cover.type == 1"
              v-lazy="item.cover.images[0]"
              width="100"
              height="100"
              fit="cover"
            />
            <!-- label 插槽：下面的地方 -->
            <template slot="label">
              <!-- 如果有3张图片就循环显示 -->
              <div class="index-article-images" v-if="item.cover.type == 3">
                <van-image
                  v-for="(i, k) in item.cover.images"
                  :key="k"
                  width="100"
                  height="100"
                  fit="cover"
                  v-lazy="i"
                />
              </div>
              <!-- 文章下面的描述 -->
              <div class="index-article-label">
                <van-tag v-if="item.is_top == 1" plain type="danger" size="medium">置顶</van-tag>
                <span>{{item.aut_name}}</span>
                <span>{{item.comm_count}}评论</span>
                <span>{{item.pubdate | relativeTime}}</span>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>

      <!-- 弹出层是否展示 -->
      <!-- 占位 -->
      <van-button slot="nav-right" icon="apps-o" />
      <!-- 真正的按钮 -->
      <van-button
        @click="showPopup=true"
        style="position: fixed;right:0"
        icon="apps-o"
        slot="nav-right"
      />
    </van-tabs>

    <!-- 编辑频道 -->
    <van-popup closeable v-model="showPopup" close-icon-position="top-right" position="bottom">
      <!-- 用户频道 -->
      <van-cell-group :border="false">
        <!-- 自定义标题 -->
        <div slot="title">
          <van-button
            style="float:right;"
            plain
            round
            type="danger"
            @click="showDeleteBtn=!showDeleteBtn"
            size="mini"
          >{{showDeleteBtn ? '完成' : '编辑'}}</van-button>
          <h3>我的频道</h3>
        </div>
        <van-grid class="index-channel" :gutter="10">
          <van-grid-item
            v-for="(item, index) in userChannels"
            :key="index"
            :icon="showDeleteBtn? 'close' : ''"
            :text="item.name"
            @click="onDeleteChannel($event, index)"
          />
        </van-grid>
      </van-cell-group>

      <!-- 推荐频道 -->
      <van-cell-group class="index-channel" :border="false">
        <!-- 自定义标题 -->
        <h3 slot="title">推荐频道</h3>
        <van-grid :gutter="10">
          <van-grid-item
            v-for="(item, index) in channels"
            :key="index"
            :text="item.name"
            @click="onAllChannelClicked(index)"
          />
        </van-grid>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
// 获取接口
import {
  getAllChannels,
  getUserChannels,
  addUserChannel,
  deleteUserChannel,
  getChannelArticles
} from "@/utils/api.js";

export default {
  data() {
    return {
      active: 0, // 当前选中的频道的下标
      value: "",
      page: 1, // 第几页
      perPage: 15, // 每页条数
      articles: {}, // 文章数据对象 (缓存数组)
      channelId: "", // 当前选中的频道的 ID
      channels: [], // 频道数据
      userChannels: [], // 用户选择的频道
      showPopup: false, // 是否显示编辑频道的弹出层
      showDeleteBtn: false, // 是否显示删除图标
      isRefreshing: false, // 是否 正在刷新
      vanList: {
        loading: false, // 是否正在加载数据
        finished: false, // 是否已经完全加载完
        offset: 300, // 滚动条距离底部的距离
        loadingText: "加载中...", // 加载时文本
        finishedText: "没有更多了..." // 加载完之后文本
      },
      preTimestamp: {} // 保存每个频道用来翻页的时间戳，频道ID做为键
    };
  },
  async created() {
    // // 获取所有频道数据
    // try {
    //   let res = await getAllChannels();
    //   this.channels = res.data.data.channels;
    //   // console.log(this.channels)
    // } catch (error) {
    //   this.$toast.fail("获取频道数据失败");
    // }
    // // 获取用户频道数据
    // try {
    //   let res = await getUserChannels();
    //   this.userChannels = res.data.data.channels;
    //   // console.log(this.userChannels);
    //   // 更新当前频道的id
    //   this.channelId = this.userChannels[this.active].id;
    // } catch (error) {
    //   this.$toast.fail("获取用户频道数据失败！");
    // }
    // (并行执行）两个接口同时执行，当两个都执行完之后，返回两个结果
    const [r1, r2] = await Promise.all([getAllChannels(), getUserChannels()]);
    this.channels = r1.data.data.channels;
    this.userChannels = r2.data.data.channels;
    // 更新当前频道的id
    this.channelId = this.userChannels[this.active].id;

    // 根据频道ID获取新的文章
    await this.getArticles();
  },
  methods: {
    // 在所有频道中点击时
    async onAllChannelClicked(i) {
      // 从所有频道的数组中截取出点击的频道
      let data = this.channels.splice(i, 1);
      // 把截取出来的频道放到我的频道数组中
      this.userChannels.push(data[0]);
      // 调用接口修改原数据
      try {
        let params = {
          channels: [
            {
              id: data[0].id,
              seq: data[0].id
            }
          ]
        };
        let res = await addUserChannel(params);
      } catch (error) {
        this.$toast.fail("用户添加频道失败");
      }
    },
    // 点击删除图标时
    async onDeleteChannel(e, i) {
      // 判断点击的是否是关闭图标
      if (e.srcElement.nodeName == "I") {
        // 从我的频道数组中截取要删除的频道
        let data = this.userChannels.splice(i, 1);
        // 把截取出来的频道放到所有频道的数组中
        this.channels.push(data[0]);
        // 调用删除接口
        try {
          await deleteUserChannel(data[0].id);
        } catch (error) {
          console.log(error);
          this.$toast.fail("删除失败");
        }
      }
    },
    // 加载更多文章 (根据频道ID获取新的文章)
    async getArticles() {
      // 是否已经获取到了频道id 只要频道ID不等于 0 就执行
      if(this.channelId !== '') {
        try {
          // 设置为当前正在加载数据的状态
          this.vanList.loading = true;
          // 根据频道ID和上次时间戳加载数据
          // 说明：如果上次时间戳是空（第一次调用接口），那么就使用当前时间戳(this.preTimestamp || Date.now())
          let res = await getChannelArticles(
            this.channelId,
            this.preTimestamp[this.channelId] || Date.now()
          );
          // 设置当前的状态不是 “正在加载”
          this.vanList.loading = false;
          // 判断是否已经没有下一页了
          if (res.data.data.results.length == 0) {
            // 设置已经加载完的状态
            this.vanList.finished = true
          } else {
            // 如果这个频道ID中还没有数据直接设置为当前数据 -- 第一次加载 
            if (this.articles[this.channelId] == undefined) {
              this.articles[this.channelId] = res.data.data.results
            } else {
              // 把新的数据 "展开" 然后放到原数组最后 -- 第n次加载
              this.articles[this.channelId].push(...res.data.data.results);
            }
            // 保存本次接口的时间戳数据，用来下次调用接口时的翻页
            this.preTimestamp[this.channelId] = res.data.data.pre_timestamp
          }
          // console.log(this.articles);
        } catch (error) {
          this.$toast.fail("获取频道文章失败!");
        }
      } else {
        // 如果没有频道id就先 延迟 0.5 秒等频道接口执行完之后有了频道ID 再执行
        setTimeout(this.getArticles, 500)
      }
    },
    // 下拉刷新
    async onRefresh() {
      // 清空当前这个频道的数据
      this.articles[this.channelId] = [];
      // 设置翻页时间戳为最新的
      this.preTimestamp[this.channelId] = Date.now();
      // 重新调用接口获取当前的数据
      await this.getArticles();
      // 设置已经刷新完
      this.isRefreshing = false;
    }
  },
  // 监听器
  watch: {
    // 监听 active 变量当值改变时调用函数
    active: async function(newValue, oldValue) {
      // 更新频道id
      this.channelId = this.userChannels[newValue].id;
      // 如果新切换的频道中还没有文章那么就获取文章
      if (this.articles[this.channelId] === undefined) {
        // 获取新的文章
        await this.getArticles();
      }
    }
  }
};
</script>

<style lang="less">
.index-navbar {
  .van-nav-bar__title {
    height: 80%;
    width: 90%;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .van-button {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    &__icon {
      color: #fff !important;
    }
    &__text {
      color: #fff;
      font-weight: normal;
    }
  }
  .van-tabs__wrap {
    padding-right: 50px;
  }
}
.index {
  .van-popup {
    height: 100%;
    padding: 60px 10px 10px;
    box-sizing: border-box;
  }
}
.index-channel {
  .van-icon {
    position: absolute;
    right: -8px;
    top: -8px;
    font-size: 20px;
    color: #bbb;
    background-color: #fff;
    z-index: 9999;
  }
  .van-grid-item__text {
    margin-top: 0 !important;
  }
}
.index-article-images {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.index-article-label {
  span {
    margin-right: 20px;
  }
}
</style>